<template>
  <div class="remark">
    <div class="table">
       <el-table :data="tableData" stripe style="width: 100%" height="400">
         <el-table-column type="expand">
      <template slot-scope="props">
        <recomment :recommentId=props.row.id :blogId=id></recomment>
      </template>
    </el-table-column>
        <el-table-column
          v-for="item in tableItem"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="columWidth(item.prop)"
        >
          <template slot="header">
            <input
              type="text"
              class="searchInput"
              @input="chooseSearchRemark"
              placeholder="输入关键字搜索"
              v-model="searchBlog"
              v-if="item.prop == 'option'"
            />
            <span v-if="item.prop != 'option'">{{ item.label }}</span>
          </template>
          <template slot-scope="scope">
            <span @click="seeContent(scope.row)" :class="{Active:item.prop==='content'}" class="limitWidth" v-if="item.prop !== 'option' && item.prop !== 'time' && item.prop !=='avatar'">{{
              scope.row[item.prop]
            }}</span>
            <img :src="scope.row.avatar" v-if="item.prop==='avatar'">
            <span v-if="item.prop === 'time'">{{
              scope.row[item.prop] | formatTime
            }}</span>
            <el-button
              type="danger"
              v-if="item.prop === 'option'"
              @click="startDel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <transition name="fadeIn">
      <div v-if="showContent">
        <div class="black" @click="closeContent"></div>
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>用户名: {{username}}</span>
              <span style="marginLeft:20px">昵称: {{realname}}</span>
              <span style="marginLeft:20px">点赞数: {{goodNum}}</span>
              <span style="marginLeft:20px">时间: {{time | formatTime}}</span>
            </div>
            <div>{{content}}</div>
          </el-card>
        </div>
      </div>
    </transition>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span class="error">确定删除该内容吗(不可改变)</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script lang="ts">
import {Component,Vue,Prop} from "vue-property-decorator"
import { component } from 'vue/types/umd'
import recomment from "./recomment.vue"
import format from "../../formatTime"
type TableData = {
  avatar:string,
  content:string,
  goodNum:number,
  id:number,
  realname:string,
  time:string,
  username:string
}
type TableItem = {
  id:string,
  prop:string,
  label:string
}
@Component({
  filters:{
    formatTime(val:string){
      return format(val)
    }
  },
  components:{
    recomment
  }
})
export default class remark extends Vue{
  @Prop() private id!:number
  private tableData:any[] = []
  private tableDataAll:any[] = [] 
  private tableItem:TableItem[]=[
    {id:"0",prop:"id",label:"id"},
    {id:"1",prop:"avatar",label:"头像"},
    {id:"6",prop:"username",label:"用户名"},
    {id:"4",prop:"realname",label:"昵称"},
    {id:"2",prop:"content",label:"内容"},
    {id:"3",prop:"goodNum",label:"点赞数"},
    {id:"5",prop:"time",label:"时间"},
    {id:"7",prop:"option",label:"操作"}
  ]
  private username:string = ""
  private realname:string = ""
  private content:string = ""
  private time:string = ""
  private goodNum:number = 0
  private currentId:number = 0
  private dialogVisible:boolean = false
  private showContent:boolean = false
  private searchBlog:string = ""
  get columWidth(){
  return function(val:string){
    if(val!=="time"&&val!=="option"&&val!=="content"){
      return 100
    }
  }
}
  created() {
    this.getAllRemark() 
  }
  chooseSearchRemark():void{
    this.tableData = this.tableDataAll.filter(item=>{
      let f = new RegExp(this.searchBlog,"g")
      return f.test(item.username)
    })
  }
  confirm():void{
    this.$axios
        .post("/comment/del", {
          id: this.currentId,
          username: this.$store.state.user.userInfo.username,
        }).then(res=>{
          console.log(res)
          if (res.data.error === -1) {
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getAllRemark()
        } else {
          this.dialogVisible = false;
          this.$message({
            type: "error",
            message: "删除失败",
          });
        }
        })
  }
  closeContent():void{
    this.showContent = false
  }
  seeContent(val:TableData){
    this.username = val.username
    this.realname = val.realname
    this.content = val.content
    this.goodNum = val.goodNum
    this.time = val.time
    this.showContent = true
  }
  startDel(val:number):void{
  this.currentId = val
  this.dialogVisible = true
  }
getAllRemark() {
      this.$axios
        .get("/comment/search", {
          params: {
            blogId: this.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.tableData = res.data.data
            this.tableDataAll = res.data.data
          } else if (res.data.error === 0) {
            this.tableData = []
          }
        });
    }
}
</script>

<style lang="less" scoped>
.remark{
  position:relative;
}
.searchInput {
  border-radius: 3px;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  outline: none;
  &:focus {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
  }
}
.bread {
    margin: 25px;
  }
  img{
    width:50px;
    height:50px;
    border-radius:50%;
  }
  .limitWidth{
    display:inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 50px;
  }
  .Active{
  transition: all .3s;
  width: 100%;
  height: 100%;
  &:hover{
    background-color:darkgrey;
    cursor: pointer;
  }
}
.black {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.6);
}
.box-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom:0;
  margin: auto;
  width: 60%;
  height: 150px;
  z-index: 9;
  overflow: scroll;
  .clearfix {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  span {
    margin: 0 10px;
  }
}
</style>